window.onload = () => {
    window.onresize = waterFlow();

    //waterFlow();
    var dataImage = {
        data: [
            { src: './img/1.png' },
            { src: './img/2.png' },
            { src: './img/3.png' },
            { src: './img/4.png' },
            { src: './img/5.png' },
            { src: './img/6.png' },
            { src: './img/7.png' },
            { src: './img/8.png' },
            { src: './img/9.png' },
            { src: './img/10.png' },
            { src: './img/11.png' },
        ],
    };

    window.onscroll = function () {
        if (checkReachBottom()) {
            var parentContainer = document.getElementById('container');
            for (var i = 0; i < dataImage.data.length; i++) {
                var childBox = document.createElement('div');
                childBox.setAttribute('class', 'box');
                parentContainer.appendChild(childBox);

                var childImgBox = document.createElement('div');
                childImgBox.setAttribute('class', 'boxing');
                childBox.appendChild(childImgBox);

                var img = document.createElement('img');
                img.setAttribute('src', dataImage.data[i].src);
                childImgBox.appendChild(img);
            }

            window.onresize = waterFlow();
        }
    };

    function waterFlow() {
        let parentContainer = document.querySelector('.container');
        let allChild = document.querySelectorAll('.box');
        let screenWidth = document.documentElement.clientWidth;
        let childWidth = allChild[0].offsetWidth;
        //算出屏幕宽度可以摆放多少张图片
        let rowsNum = Math.floor(screenWidth / childWidth) - 1;

        parentContainer.style.width = `${rowsNum * childWidth}px`;
        parentContainer.style.margin = '0 auto';
        getminHeight(allChild, rowsNum);
    }
    //新增图片
    window.onscroll = function () {
        if (checkReachBottom()) {
            let parentContainer = document.querySelector('.container');
            for (let i = 0; i < dataImage.data.length; i++) {
                let childBox = document.createElement('div');
                childBox.setAttribute('class', 'box');
                parentContainer.appendChild(childBox);

                let childImgBox = document.createElement('div');
                childImgBox.setAttribute('class', 'boxing');
                childBox.appendChild(childImgBox);

                let img = document.createElement('img');
                img.setAttribute('src', dataImage.data[i].src);
                childImgBox.appendChild(img);
            }

            window.onresize = waterFlow();
        }
    };

    function getminHeight(allChild, rowsNum) {
        // 存储每列的高度
        let heightArr = [];
        for (let i = 0; i < allChild.length; i++) {
            // 判断取出第一行的图片，获取图片对应的高度，放入到数组中
            if (i < rowsNum) {
                // i = 6;
                // 获取当前图片的高度
                heightArr[i] = allChild[i].offsetHeight;
            } else {
                // 获取列高度最小的值
                let minHeight = Math.min.apply(null, heightArr);
                // 获取最小值对应的下标(位置)
                let minHeightIndex = heightArr.indexOf(minHeight);
                // 摆放第二张图片的位置
                allChild[i].style.position = 'absolute';
                allChild[i].style.top = minHeight + 'px';
                allChild[i].style.left =
                    allChild[minHeightIndex].offsetLeft + 'px';
                // 高度的合并
                heightArr[minHeightIndex] =
                    heightArr[minHeightIndex] + allChild[i].offsetHeight;
            }
        }
    }

    function checkReachBottom() {
        // 获取滚动高度
        let scrollHeight = document.documentElement.scrollTop;
        // 获取视口高度
        let pageHeight = document.documentElement.clientHeight;
        // 获取文档总高度

        // 获取最右一个元素
        let allChild = document.getElementsByClassName('box');
        let lastChildTop = allChild[allChild.length - 1].offsetTop;
        //console.log(scrollHeight,pageHeight);

        if (lastChildTop < pageHeight + scrollHeight) {
            return true;
        } else {
            return false;
        }
    }
};
